import style from './index.less';
import request from 'umi-request';
import { useEffect, useState } from 'react';
import emptyStateImage from '../../../assets/emptyStateImage.png';

const BlockDetailsTable = ({ defaultText }) => {
  const [card3, setCard3] = useState([]);
  const [loading, setLoading] = useState(true); // Add a loading state
  const [searchedContent, setSearchedContent] = useState('');

  /* 复制 */
  const handleCopy = (final) => {
    console.log(final);
    navigator.clipboard.writeText(final?.hash);
  };

  useEffect(() => {
    if (defaultText) {
      fetchData3(defaultText);
    }
  }, [defaultText]);

  const fetchData3 = async (defaultText) => {
    try {
      const response = await request.post('/api/blockInfo', {
        params: {
          key: defaultText,
        },
      });
      console.log(response);
      setCard3(response.data || []);
      setLoading(false); // Set loading state to false after data is fetched
      console.log(response.data);
    } catch (error) {
      console.log('eeor', error);
      setCard3([]);
      setLoading(false); // Set loading state to false if there is an error
    }
  };

  // Render empty state if loading is true or card3 is empty
  if (loading || card3?.length === 0) {
    return (
      <div className={style.emptyState}>
        <div className={style.emptyStateBox}>
          <img src={emptyStateImage} alt="No Results" />
          <br></br>
          <span>{`搜索"${defaultText}"无结果`}</span>
        </div>
      </div>
    );
  }
  return (
    <div className={style.bigBox}>
      <div>
        <span className={style.icon}></span>
        <span className={style.header}>区块信息</span>
      </div>
      <div className={style.box}>
        <span className={style.listTitle}></span>
        <span className={style.listContent}>{/* {card3?.number} */}</span>

        <div>
          <span>区块高度</span>
          <span>{card3?.number || '-'}</span>
        </div>
        <div>
          <span>区块哈希</span>
          <span>{card3.hash}</span>
         {/*  <span onClick={() => handleCopy(item)}>
            <svg
              t="1691565957064"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2373"
              width="16"
              height="16"
            >
              <path
                d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
                fill="#8a8a8a"
                p-id="2374"
              ></path>
            </svg>
          </span> */}
        </div>
        <div>
          <span>父区块哈希</span>
          <span>{card3.parent_hash}</span>
        </div>
        <div>
          <span>Merkle树的根哈希</span>
          <span>{card3.merkle_root}</span>
        </div>
        <div>
          <span>交易平均时间</span>
          <span>{card3.avgTime}</span>
        </div>
        <div>
          <span>出块时间</span>
          <span>{card3.writeTime}</span>
        </div>
        <div>
          <span>交易数量</span>
          <span>{card3.txCounts}</span>
        </div>
      </div>
    </div>
  );
};

export default BlockDetailsTable;
